<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>备件领料审核</title>
    <link rel="stylesheet" href="/erms/statics/plugins/layui-v2.6.8/css/layui.css">
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>工具备件领用申请</legend>
</fieldset>
<form class="layui-form" lay-filter="formTest">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">领料人：</label>
            <div class="layui-input-inline">
                <input type="text" name="pickerName" class="layui-input" readonly>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">领用部门：</label>
            <div class="layui-input-inline">
                <input type="text" name="deptName" class="layui-input" readonly>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">领用产线：</label>
            <div class="layui-input-inline">
                <input type="text" name="lineCode" class="layui-input" readonly>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">申请日期：</label>
            <div class="layui-input-inline">
                <input type="text" name="pickDate" class="layui-input" readonly>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">用途：</label>
            <div class="layui-input-inline">
                <input type="text" name="purpose" class="layui-input" readonly>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">领料类别：</label>
            <div class="layui-input-inline">
                <input type="text" name="materialType" class="layui-input" readonly>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">工单号：</label>
            <div class="layui-input-inline">
                <input type="text" name="jobCode" class="layui-input" readonly>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">备注：</label>
            <div class="layui-input-inline">
                <textarea name="remark" placeholder="请输入内容" class="layui-textarea" rows="3" style="min-height: 50px;"></textarea>
            </div>
        </div>
    </div>

    <!-- 领用备件申请列表 -->
    <table id="demo" lay-filter="test"></table>
    <!-- 备件领用审批记录 -->
    <table id="auditHistory" lay-filter="auditHistory"></table>
    <div class="layui-form-item" id="auditRadio">
        <label class="layui-form-label">审批</label>
        <div class="layui-input-block">
            <input type="radio" name="state" value="1" title="同意" checked>
            <input type="radio" name="state" value="2" title="不同意">
        </div>
    </div>
    <div class="layui-form-item layui-form-text" id="auditTextArea">
        <label class="layui-form-label">审批意见</label>
        <div class="layui-input-block">
            <textarea placeholder="请输入审批意见" name="checkRemark" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item" id="auditButton">
        <div class="layui-input-block">
            <input type="hidden" name="id"/>
            <input type="hidden" name="workItemId"/>
            <button class="layui-btn" lay-submit lay-filter="confirmAudit">确认审核</button>
        </div>
    </div>
</form>
<script type="text/html" id="operation">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script src="/erms/statics/plugins/layui-v2.6.8/layui.js"></script>
<script type="text/javascript" src="/erms/statics/plugins/jquery.min.js"></script>
<script>
    //等待计时 是否等待
    var awitTime = true;
    layui.use(['layer', 'table', 'form'], function () {
        var layer = layui.layer, form = layui.form, table = layui.table;
        var procInstId = getQueryParam('procInstId');
        var workItemId = getQueryParam('workItemId');
        if (!procInstId && !workItemId) {
            // 审核区域全部不显示
            hideAuditArea();
            // 理论上不会发生流程ID和工作项ID都没有传递的场景
            layer.msg('当前页只用于OA系统备件领用审核，请确认！', {icon: 7, time: 5000, shade: [0.6, '#000', true]});
        } else {
            // 拼接查询参数
            var queryParam = '';
            // 如果流程ID存在，则拼接查询参数
            if (procInstId) {
                queryParam = 'procInstId=' + procInstId;
            }
            // 如果OA审批项ID存在，则拼接查询参数
            if (workItemId) {
                if (queryParam) {
                    queryParam += '&workItemId=' + workItemId;
                } else {
                    queryParam = 'workItemId=' + workItemId;
                }
            } else {
                // 工作项ID不存在，也隐藏审核区域
                hideAuditArea();
                workItemId = '';
            }
            var getUrl = '/erms/spareMater/loadSpareMaterialBaseList';
            if (queryParam) {
                getUrl += '?' + queryParam;
            }
            // 声明领料类型进行转换
            var MATER_TYPE = {2: '维修领料', 1: '线边库', 3: '维护领料', 4: '修复'};
            // 拉取服务器端
            $.get(getUrl, function (data, status) {
                if (status == 'success' && data.code == 0) {
                    //给表单赋值
                    form.val("formTest", {
                        "pickerName": data.materialBase.pickerName,
                        "deptName": data.materialBase.deptName,
                        "purpose": data.materialBase.purpose,
                        "lineCode": data.materialBase.lineCode,
                        "pickDate": data.materialBase.pickDate,
                        "id": data.materialBase.id,
                        "jobCode":data.materialBase.jobCode,
                        "remark":data.materialBase.remark,
                        "materialType": MATER_TYPE[data.materialBase.materialType],
                        "workItemId": workItemId
                    });
                    var columns = [
                        {field: 'id', hide: true, title: '主键'},
                        {type: 'numbers', title: '序号', width: '5%'},
                        {field: 'spareCode', width: '10%', align: "center", title: '系统编码'},
                        {field: 'erpCode', width: '10%', align: "center", title: '物料编码'},
                        {field: 'spareName', width: '15%', align: "center", title: '物料名称'},
                        {field: 'spec', width: '15%', align: "center", title: '型号规格'},
                        {field: 'num', width: '5%', align: "center", title: '领用数'},
                        {field: 'actualNum', width: '5%', align: "center", title: '实发数', edit: 'text'},
                        {field: 'storeName', width: '15%', align: "center", title: '仓库名称'},
                        {field: 'postion', width: '15%', align: "center", title: '备件位置'}
                    ];
                    // 有且仅当工作项状态为2时，显示审批窗口和操作按鈕。其余则不显示
                    var workItemState = data.workItemState;
                    if (!workItemState || workItemState != 2) {
                        hideAuditArea();
                    }else{
                        columns.push({fixed: 'right', title: '操作', toolbar: '#operation', width: '4%'})
                    }
                    // 渲染备件列表
                    table.render({
                        elem: '#demo',
                        data: data.materialItems,//json数据
                        cols: [[
                            {colspan: 11, title: '领料申请列表', align: "center"}
                        ], columns],
                        limit: data.materialBase.materialItems.length,
                        page: false,
                        forceFit: true,
                        cellEdit: true,
                        cellsubmit: 'remote',
                        cellurl: '../toolscheckticketitem/updateMeasuredValue',
                        afterSaveCell: function (rowid, name, val, iRow, iCol) {
                            vm.reload();
                        }
                    });
                    if (data.auditRecordList.length > 0) {
                        // 渲染审批历史
                        table.render({
                            elem: '#auditHistory',
                            data: data.auditRecordList,//json数据
                            cols: [[
                                {colspan: 7, title: '领料审核进度', align: "center"}
                            ], [
                                {field: 'id', hide: true, title: '主键'},
                                {type: 'numbers', title: '序号', width: '5%'},
                                {field: 'workitemName', width: '25%', align: "center", title: '环节名称'},
                                {field: 'approverName', width: '15%', align: "center", title: '处理人'},
                                {
                                    field: 'state',
                                    width: '15%',
                                    align: "center",
                                    title: '审批结果',
                                    templet: function (d) {
                                        return d.state == 1 ? '同意' : '不同意';
                                    }
                                },
                                {field: 'remark', width: '25%', align: "center", title: '审批意见'},
                                {field: 'approveDate', width: '15%', align: "center", title: '处理时间'}
                            ]],
                            limit: data.auditRecordList.length,
                            page: false
                        });
                    }

                }
            });
        }

        form.on('submit(confirmAudit)', function (data) {
            /*
            1.全局变量awitTime 为true 点击确认（btn1）了之后 为false ，①确定5s后为true ②请求成功为true
            * */
            if (awitTime) {
                layer.confirm('您确认提交审核记录吗？', {
                    btn: ['确定', '取消'],
                    btn1: function () {
                        awitTime = false;
                        setTimeout(function(){
                            awitTime = true;
                        }, 5000);
                        // 提交审核数据并跳转
                        $.post('/erms/spareMater/check', data.field, function (res) {
                            awitTime = true;
                            window.open(res)
                        });
                    },
                    btn2: function () {
                        return;
                    }
                });
            } else {
                layer.msg('请求未结束，请等待！', {icon: 7});
            }
            return false;
        });
        // 监听实发数被变化
        table.on('edit(test)', function (obj) { //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
            // 提交审核数据并跳转
            $.post('/erms/spareMater/updateActualNum', obj.data, function (res) {
                if (res.code == 0) {
                    layer.msg(res.msg, {icon: 1});
                } else {
                    layer.msg(res.msg, {icon: 2}, function () {
                        // 只要是更新失败，都刷新下当前页面
                        location.reload(true);
                    });
                }
            });
        });
        //行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            if (layEvent === 'del') {
                layer.confirm('确认删除物料[' + data.spareName + ']的申请信息？', function (index) {
                    layer.close(index);
                    // 提交审核数据并跳转
                    $.get('/erms/spareMater/logicDelete?itemId=' + data.id, function (res) {
                        if (res.code == 0) {
                            layer.msg(res.msg, {icon: 1}, function () {
                                // 只要是更新失败，都刷新下当前页面
                                location.reload(true);
                            });
                        } else {
                            layer.msg(res.msg, {icon: 2}, function () {
                                // 只要是更新失败，都刷新下当前页面
                                location.reload(true);
                            });
                        }
                    });
                });
            }
        });
    });

    function getQueryParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return unescape(r[2]);
        }
        return null;
    }

    // 隐藏审核区域
    function hideAuditArea() {
        // 审核区域全部不显示
        $('#auditRadio').hide();
        $('#auditTextArea').hide();
        $('#auditButton').hide();
    }
</script>
</body>
</html>
